<template>
    <template v-for="item in props.data">
        <template v-if="item.children && item.children.length">
            <Submenu :name="item.name">
                <template #title>
                    <Icon :type="item.icon" />
                    {{ item.title }}
                </template>
                <customMenuItem :data="item.children" />
            </Submenu>
        </template>
        <template v-else>
            <MenuItem :name="item.name">
                <Icon :type="item.icon" />
                {{ item.title }}
            </MenuItem>
        </template>
    </template>
</template>


<script setup lang ='ts' name="customMenuItem">
import { ref, reactive, onMounted } from 'vue'
interface PropsType {
    data?: Array<ItemType>
}

const props = withDefaults(defineProps<PropsType>(), {
    data: () => []
})

</script>

<style lang = 'scss' scoped>

</style>